<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue'
import BaseButton from '@/components/ui/BaseButton.vue'
import { useTokenStore } from '@/store/token'
import { useUserStore } from '@/store/user'
import { safeAreaInsets } from '@/utils/systemInfo'

defineOptions({
  name: 'Me',
})
definePage({
  excludeLoginPath: true, // 需要登录才能访问
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '我的',
  },
})

// 用户store和token store
const userStore = useUserStore()
const tokenStore = useTokenStore()

// 计算登录状态
const isLoggedIn = computed(() => tokenStore.hasLogin)

// 计算用户信息
const userInfo = computed(() => {
  const user = userStore.userInfo
  return {
    id: user.userId || -1,
    username: user.username || '',
    displayName: user.nickname || user.username || '未设置昵称',
    avatar: user.avatar || '/static/images/default-avatar.png',
    bio: user.bio || `热爱阅读的${user.username || '用户'} 📚`,
    verified: user.verified || false,
    verifiedType: user.verifiedType || '普通用户',
    stats: user.stats || {
      following: 0,
      followers: 0,
      shares: 0,
    },
    // 额外的用户信息
    email: user.email || '',
    phone: user.phone || '',
    gender: user.gender || 0,
    status: user.status || 1,
    createdAt: user.createdAt || '',
    lastLoginTime: user.lastLoginTime || '',
  }
})

// 阅读统计数据
const readingStats = ref({
  booksRead: 156,
  readingTime: 328,
  streakDays: 23,
  achievements: 12,
})

// 成就徽章数据
const achievements = ref([
  { id: 1, name: '阅读达人', icon: 'fas fa-medal', type: 'gold', unlocked: true },
  { id: 2, name: '分享之星', icon: 'fas fa-star', type: 'gold', unlocked: true },
  { id: 3, name: '收藏家', icon: 'fas fa-bookmark', type: 'silver', unlocked: true },
  { id: 4, name: '活跃评论', icon: 'fas fa-comment', type: 'bronze', unlocked: true },
  { id: 5, name: '未解锁', icon: 'fas fa-lock', type: 'locked', unlocked: false },
  { id: 6, name: '未解锁', icon: 'fas fa-lock', type: 'locked', unlocked: false },
  { id: 7, name: '未解锁', icon: 'fas fa-lock', type: 'locked', unlocked: false },
  { id: 8, name: '未解锁', icon: 'fas fa-lock', type: 'locked', unlocked: false },
])

// 功能菜单数据
const menuItems = ref([
  {
    id: 1,
    title: '阅读历史',
    subtitle: '查看您的阅读记录',
    icon: 'fas fa-history',
    color: 'primary',
    badge: '236',
    hasArrow: true,
  },
  {
    id: 2,
    title: '我的分享',
    subtitle: '管理您分享的小说',
    icon: 'fas fa-share-alt',
    color: 'secondary',
    badge: '89',
    hasArrow: true,
  },
  {
    id: 3,
    title: '我的收藏',
    subtitle: '收藏的小说和用户',
    icon: 'fas fa-heart',
    color: 'success',
    badge: null,
    hasArrow: true,
  },
  {
    id: 4,
    title: '书签管理',
    subtitle: '管理阅读书签',
    icon: 'fas fa-bookmark',
    color: 'warning',
    badge: null,
    hasArrow: true,
  },
])

// 设置选项数据
const settings = ref([
  {
    id: 1,
    title: '夜间模式',
    icon: 'fas fa-moon',
    type: 'switch',
    value: true,
  },
  {
    id: 2,
    title: '推送通知',
    icon: 'fas fa-bell',
    type: 'switch',
    value: true,
  },
  {
    id: 3,
    title: '自动同步',
    icon: 'fas fa-sync',
    type: 'switch',
    value: false,
  },
  {
    id: 4,
    title: '缓存管理',
    icon: 'fas fa-database',
    type: 'navigation',
    subtitle: '128 MB',
    hasArrow: true,
  },
  {
    id: 5,
    title: '关于我们',
    icon: 'fas fa-info-circle',
    type: 'navigation',
    hasArrow: true,
  },
])

// 跳转到登录页面
function goToLogin() {
  uni.navigateTo({
    url: '/pages/auth/login/index',
  })
}

// 跳转到注册页面
function goToRegister() {
  uni.navigateTo({
    url: '/pages/auth/register/index',
  })
}

// 处理通知
function handleNotification() {
  uni.showToast({
    title: '通知功能开发中',
    icon: 'none',
  })
}

// 处理设置
function handleSettings() {
  uni.showToast({
    title: '设置功能开发中',
    icon: 'none',
  })
}

// 退出登录
async function handleLogout() {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: async (res) => {
      if (res.confirm) {
        try {
          // 调用token store的logout方法
          await tokenStore.logout()
          uni.showToast({
            title: '已退出登录',
            icon: 'success',
          })
        }
        catch (error) {
          console.error('退出登录失败:', error)
          uni.showToast({
            title: '退出登录失败',
            icon: 'error',
          })
        }
      }
    },
  })
}

// 切换开关状态
function toggleSwitch(setting: any) {
  setting.value = !setting.value
  const settingName = settings.value.find(s => s.id === setting.id)?.title
  uni.showToast({
    title: `${settingName}: ${setting.value ? '开启' : '关闭'}`,
    icon: 'none',
  })
}

// 处理菜单项点击
function handleMenuClick(menu: any) {
  uni.showToast({
    title: `${menu.title}功能开发中`,
    icon: 'none',
  })
}

// 处理设置项点击
function handleSettingClick(setting: any) {
  if (setting.type === 'navigation') {
    uni.showToast({
      title: `${setting.title}功能开发中`,
      icon: 'none',
    })
  }
}

// 处理成就点击
function handleAchievementClick(achievement: any) {
  if (achievement.unlocked) {
    uni.showToast({
      title: `查看成就: ${achievement.name}`,
      icon: 'none',
    })
  }
  else {
    uni.showToast({
      title: '成就未解锁',
      icon: 'none',
    })
  }
}

// 查看所有成就
function viewAllAchievements() {
  uni.showToast({
    title: '成就详情功能开发中',
    icon: 'none',
  })
}

// 编辑个人资料
function editProfile() {
  uni.showActionSheet({
    itemList: ['修改昵称', '修改头像', '修改个人简介'],
    success: (res) => {
      switch (res.tapIndex) {
        case 0:
          // 修改昵称
          uni.showModal({
            title: '修改昵称',
            editable: true,
            placeholderText: '请输入新昵称',
            success: (modalRes) => {
              if (modalRes.confirm && modalRes.content) {
                updateUserInfo({ nickname: modalRes.content })
              }
            },
          })
          break
        case 1:
          // 修改头像
          chooseAvatar()
          break
        case 2:
          // 修改个人简介
          uni.showModal({
            title: '修改个人简介',
            editable: true,
            placeholderText: '请输入个人简介',
            success: (modalRes) => {
              if (modalRes.confirm && modalRes.content) {
                updateUserInfo({ bio: modalRes.content })
              }
            },
          })
          break
      }
    },
  })
}

// 选择头像
function chooseAvatar() {
  uni.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      const tempFilePath = res.tempFilePaths[0]
      // 这里应该先上传图片，然后更新用户头像
      // 暂时直接使用本地路径作为演示
      updateUserInfo({ avatar: tempFilePath })
    },
  })
}

// 更新用户信息
async function updateUserInfo(data: any) {
  try {
    // 这里应该调用后端API更新用户信息
    // const response = await updateInfo({ id: userInfo.value.id, ...data })

    // 暂时直接更新本地store
    userStore.setUserInfo({
      ...userStore.userInfo,
      ...data,
    })

    uni.showToast({
      title: '更新成功',
      icon: 'success',
    })
  }
  catch (error) {
    console.error('更新用户信息失败:', error)
    uni.showToast({
      title: '更新失败，请重试',
      icon: 'error',
    })
  }
}

// 格式化粉丝数
function formatFollowers(count: number) {
  if (count >= 1000) {
    return `${(count / 1000).toFixed(1)}k`
  }
  return count.toString()
}

// 页面加载时检查登录状态并刷新用户信息
onMounted(async () => {
  // 如果已登录，刷新用户信息
  if (isLoggedIn.value) {
    try {
      await userStore.fetchUserInfo()
    }
    catch (error) {
      console.error('获取用户信息失败:', error)
      // 如果获取用户信息失败，可能是token过期，跳转到登录页
      uni.showToast({
        title: '登录状态已过期，请重新登录',
        icon: 'none',
      })
      setTimeout(() => {
        uni.navigateTo({
          url: '/pages/auth/login/index',
        })
      }, 1500)
    }
  }
})
</script>

<template>
  <view class="me-page bg-bg-dark" :style="{ paddingTop: `${safeAreaInsets?.top}px` }">
    <!-- 主要内容区域 -->
    <view class="page-content-diy">
      <!-- 用户信息卡片 -->
      <section class="profile-section">
        <!-- 未登录状态 -->
        <view v-if="!isLoggedIn" class="unauth-profile">
          <view class="unauth-icon">
            <i class="fas fa-user-circle" />
          </view>
          <text class="unauth-title">欢迎来到个人中心</text>
          <text class="unauth-subtitle">登录后查看个人资料和统计数据 📚</text>
          <view class="unauth-actions">
            <BaseButton variant="primary" class="w-full" @click="goToLogin">
              <i class="fas fa-sign-in-alt" />
              <text>立即登录</text>
            </BaseButton>
            <BaseButton variant="ghost" class="w-full" @click="goToRegister">
              <i class="fas fa-user-plus" />
              <text>注册账号</text>
            </BaseButton>
          </view>
        </view>

        <!-- 已登录状态 -->
        <view v-else class="auth-profile">
          <!-- 背景装饰 -->
          <view class="profile-bg-decoration">
            <view class="bg-circle bg-circle-1" />
            <view class="bg-circle bg-circle-2" />
            <view class="bg-circle bg-circle-3" />
          </view>

          <!-- 用户信息内容 -->
          <view class="profile-content">
            <!-- 头像和基本信息 -->
            <view class="profile-header-info">
              <view class="avatar-section" @click="editProfile">
                <image :src="userInfo.avatar" class="profile-avatar" mode="aspectFill" />
                <view class="avatar-edit-overlay">
                  <i class="fas fa-camera" />
                </view>
              </view>

              <view class="user-info-main">
                <view class="user-name-row">
                  <text class="user-name">{{ userInfo.displayName }}</text>
                  <view v-if="userInfo.verified" class="verified-badge">
                    <i class="fas fa-check-circle" />
                  </view>
                </view>
                <text class="user-id">@{{ userInfo.username }}</text>
                <view class="edit-profile-btn" @click="editProfile">
                  <i class="fas fa-edit" />
                  <text>编辑资料</text>
                </view>
              </view>
            </view>

            <!-- 用户简介 -->
            <view v-if="userInfo.bio" class="user-bio-section">
              <text class="user-bio">{{ userInfo.bio }}</text>
            </view>

            <!-- 统计数据 -->
            <view class="stats-section">
              <view class="stat-item">
                <text class="stat-number">{{ userInfo.stats.following }}</text>
                <text class="stat-label">关注</text>
              </view>
              <view class="stat-item">
                <text class="stat-number">{{ formatFollowers(userInfo.stats.followers) }}</text>
                <text class="stat-label">粉丝</text>
              </view>
              <view class="stat-item">
                <text class="stat-number">{{ userInfo.stats.shares }}</text>
                <text class="stat-label">分享</text>
              </view>
            </view>
          </view>
        </view>
      </section>

      <!-- 阅读统计 -->
      <section class="reading-stats">
        <text class="section-title">阅读统计</text>
        <view class="stats-grid">
          <view class="stat-card">
            <i class="fas fa-book-open stat-icon" />
            <text class="stat-number">{{ readingStats.booksRead }}</text>
            <text class="stat-text">已读书籍</text>
          </view>
          <view class="stat-card">
            <i class="fas fa-clock stat-icon" />
            <text class="stat-number">{{ readingStats.readingTime }}</text>
            <text class="stat-text">阅读时长</text>
          </view>
          <view class="stat-card">
            <i class="fas fa-fire stat-icon" />
            <text class="stat-number">{{ readingStats.streakDays }}</text>
            <text class="stat-text">连续阅读(天)</text>
          </view>
          <view class="stat-card">
            <i class="fas fa-trophy stat-icon" />
            <text class="stat-number">{{ readingStats.achievements }}</text>
            <text class="stat-text">获得成就</text>
          </view>
        </view>
      </section>

      <!-- 成就徽章 -->
      <section class="achievements">
        <view class="section-header">
          <text class="section-title">我的成就</text>
          <text class="view-all" @click="viewAllAchievements">
            查看全部 <i class="fas fa-chevron-right" />
          </text>
        </view>
        <view class="achievement-grid">
          <view
            v-for="achievement in achievements"
            :key="achievement.id"
            class="achievement-item"
            @click="handleAchievementClick(achievement)"
          >
            <view class="achievement-icon" :class="[achievement.type]">
              <i :class="achievement.icon" />
            </view>
            <text class="achievement-name">{{ achievement.name }}</text>
          </view>
        </view>
      </section>

      <!-- 功能菜单 -->
      <section class="menu-section">
        <view
          v-for="menu in menuItems"
          :key="menu.id"
          class="menu-item"
          @click="handleMenuClick(menu)"
        >
          <view class="menu-left">
            <view class="menu-icon" :class="[menu.color]">
              <i :class="menu.icon" />
            </view>
            <view class="menu-text">
              <text class="menu-title">{{ menu.title }}</text>
              <text class="menu-subtitle">{{ menu.subtitle }}</text>
            </view>
          </view>
          <view class="menu-right">
            <view v-if="menu.badge" class="menu-badge">
              <text>{{ menu.badge }}</text>
            </view>
            <i v-if="menu.hasArrow" class="fas fa-chevron-right menu-arrow" />
          </view>
        </view>
      </section>

      <!-- 设置选项 -->
      <section class="settings-list">
        <view
          v-for="setting in settings"
          :key="setting.id"
          class="setting-item"
          @click="setting.type === 'navigation' ? handleSettingClick(setting) : null"
        >
          <view class="setting-left">
            <i :class="setting.icon" class="setting-icon" />
            <text class="setting-title">{{ setting.title }}</text>
          </view>
          <view class="setting-control">
            <template v-if="setting.type === 'switch'">
              <view
                class="switch" :class="[{ active: setting.value }]"
                @click.stop="toggleSwitch(setting)"
              >
                <view class="switch-handle" />
              </view>
            </template>
            <template v-else-if="setting.type === 'navigation'">
              <text v-if="setting.subtitle" class="setting-subtitle">{{ setting.subtitle }}</text>
              <i class="fas fa-chevron-right menu-arrow" />
            </template>
          </view>
        </view>
      </section>

      <!-- 退出登录 -->
      <BaseButton v-if="isLoggedIn" variant="danger" class="logout-btn w-full" @click="handleLogout">
        <i class="fas fa-sign-out-alt" />
        <text>退出登录</text>
      </BaseButton>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.me-page {
  min-height: 100vh;
}

.page-content-diy {
  padding: 0 var(--spacing-md);
  padding-bottom: 120rpx;
}

// 用户信息区域样式
.profile-section {
  margin-bottom: var(--spacing-lg);
}

// 未登录状态样式
.unauth-profile {
  background-color: var(--background-medium);
  border: 2rpx solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-xl) var(--spacing-lg);
  text-align: center;
  position: relative;
}

.unauth-icon {
  font-size: 120rpx;
  color: var(--primary-color);
  margin-bottom: var(--spacing-lg);
}

.unauth-title {
  font-size: 40rpx;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
  display: block;
}

.unauth-subtitle {
  font-size: 28rpx;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xl);
  line-height: 1.5;
  display: block;
}

.unauth-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  position: relative;
  z-index: 1;
}

// 已登录状态样式
.auth-profile {
  background-color: var(--background-medium);
  border: 2rpx solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-lg);
  position: relative;
  margin-top: 24rpx;
}

.profile-content {
  position: relative;
  z-index: 1;
}

// 头像和基本信息
.profile-header-info {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.avatar-section {
  position: relative;
  cursor: pointer;
}

.profile-avatar {
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
  border: 4rpx solid var(--primary-color);
  transition: transform 0.3s ease;
}

.avatar-section:hover .profile-avatar {
  transform: scale(1.05);
}

.avatar-edit-overlay {
  position: absolute;
  bottom: 8rpx;
  right: 8rpx;
  width: 48rpx;
  height: 48rpx;
  background-color: var(--primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24rpx;
  border: 4rpx solid var(--background-medium);
  transition: all 0.3s ease;
}

.avatar-section:hover .avatar-edit-overlay {
  transform: scale(1.1);
  background-color: var(--primary-color-dark, var(--primary-color));
}

.user-info-main {
  flex: 1;
}

.user-name-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
}

.user-name {
  font-size: 40rpx;
  font-weight: 600;
  color: var(--text-primary);
}

.verified-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32rpx;
  height: 32rpx;
  background-color: var(--primary-color);
  color: white;
  border-radius: 50%;
  font-size: 20rpx;
}

.user-id {
  font-size: 26rpx;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
  display: block;
}

.edit-profile-btn {
  display: inline-flex;
  align-items: center;
  gap: 6rpx;
  padding: 8rpx 16rpx;
  background-color: var(--primary-color);
  color: white;
  border-radius: 24rpx;
  font-size: 24rpx;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2rpx solid var(--primary-color);
}

.edit-profile-btn:hover {
  background-color: var(--primary-color-dark, var(--primary-color));
  border-color: var(--primary-color-dark, var(--primary-color));
  transform: translateY(-2rpx);
}

// 用户简介
.user-bio-section {
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-md);
  background-color: var(--background-light);
  border-radius: var(--border-radius);
  border-left: 4rpx solid var(--primary-color);
}

.user-bio {
  font-size: 28rpx;
  color: var(--text-secondary);
  line-height: 1.5;
  display: block;
}

// 统计数据
.stats-section {
  display: flex;
  justify-content: space-around;
  padding: var(--spacing-lg) var(--spacing-md);
  background-color: var(--background-light);
  border-radius: var(--border-radius);
  margin: 0 -var(--spacing-lg);
}

.stat-item {
  text-align: center;
  flex: 1;
  border-right: 2rpx solid var(--border-color);
}

.stat-item:last-child {
  border-right: none;
}

.stat-number {
  font-size: 40rpx;
  font-weight: 600;
  color: var(--primary-color);
  display: block;
  margin-bottom: var(--spacing-xs);
}

.stat-label {
  font-size: 24rpx;
  color: var(--text-secondary);
  display: block;
}

// 阅读统计样式
.reading-stats {
  background-color: var(--background-medium);
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.section-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
  display: block;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
}

.stat-card {
  background-color: var(--background-light);
  border-radius: var(--spacing-xs);
  padding: var(--spacing-md);
  text-align: center;
  transition: transform 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-4rpx);
}

.stat-icon {
  font-size: 48rpx;
  color: var(--primary-color);
  margin-bottom: var(--spacing-sm);
  display: block;
}

.stat-number {
  font-size: 40rpx;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
  display: block;
}

.stat-text {
  font-size: 24rpx;
  color: var(--text-secondary);
  display: block;
}

// 成就徽章样式
.achievements {
  background-color: var(--background-medium);
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
}

.view-all {
  font-size: 28rpx;
  color: var(--primary-color);
  cursor: pointer;
}

.achievement-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.achievement-item {
  text-align: center;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.achievement-item:hover {
  transform: translateY(-4rpx);
}

.achievement-icon {
  width: 96rpx;
  height: 96rpx;
  margin: 0 auto var(--spacing-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 40rpx;
  position: relative;
}

.achievement-icon.gold {
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  color: #333;
}

.achievement-icon.silver {
  background: linear-gradient(135deg, #c0c0c0, #e8e8e8);
  color: #333;
}

.achievement-icon.bronze {
  background: linear-gradient(135deg, #cd7f32, #e4a853);
  color: white;
}

.achievement-icon.locked {
  background-color: var(--background-light);
  color: var(--text-muted);
}

.achievement-name {
  font-size: 22rpx;
  color: var(--text-secondary);
  line-height: 1.2;
  display: block;
}

// 功能菜单样式
.menu-section {
  background-color: var(--background-medium);
  border-radius: var(--border-radius);
  margin-bottom: var(--spacing-lg);
  overflow: hidden;
}

.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md);
  border-bottom: 2rpx solid var(--border-color);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item:hover {
  background-color: var(--background-light);
}

.menu-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.menu-icon {
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 36rpx;
}

.menu-icon.primary {
  background-color: rgba(255, 107, 53, 0.1);
  color: var(--primary-color);
}

.menu-icon.secondary {
  background-color: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.menu-icon.success {
  background-color: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.menu-icon.warning {
  background-color: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.menu-text {
  flex: 1;
}

.menu-title {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
  display: block;
}

.menu-subtitle {
  font-size: 24rpx;
  color: var(--text-muted);
  display: block;
}

.menu-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.menu-badge {
  background-color: var(--primary-color);
  color: var(--text-primary);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: 20rpx;
  font-size: 22rpx;
  font-weight: 500;
}

.menu-arrow {
  color: var(--text-muted);
  font-size: 28rpx;
}

// 设置选项样式
.settings-list {
  background-color: var(--background-medium);
  border-radius: var(--border-radius);
  overflow: hidden;
}

.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md);
  border-bottom: 2rpx solid var(--border-color);
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.setting-icon {
  font-size: 32rpx;
  color: var(--text-muted);
}

.setting-title {
  font-size: 28rpx;
  color: var(--text-primary);
}

.setting-control {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.setting-subtitle {
  font-size: 24rpx;
  color: var(--text-muted);
}

// 开关按钮样式
.switch {
  position: relative;
  width: 88rpx;
  height: 48rpx;
  background-color: var(--background-light);
  border-radius: 24rpx;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.switch.active {
  background-color: var(--primary-color);
}

.switch-handle {
  position: absolute;
  top: 4rpx;
  left: 4rpx;
  width: 40rpx;
  height: 40rpx;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.3s ease;
}

.switch.active .switch-handle {
  transform: translateX(40rpx);
}

// 退出登录按钮样式
.logout-btn {
  margin-top: var(--spacing-lg);
}
</style>
